<template>
  <div>
    <el-button @click="AddClick" icon="el-icon-plus" size="small"
    style="margin-top:20px"
      >添加</el-button>
    <HKTable
      :tableData="tableDatas"
      :tableColumns="tableList"
      :dict-list="dictList"
      :showIndex="true"
      :operate="true"
      :isNeedIndex="true"
      :showPag="false"
    >
      <template #operate="scope">
        <el-button
          size="mini"
          type="text"
          @click="handleDelete(scope.row)"
          >删除
        </el-button>
      </template>

      <template slot-scope="scope" v-for="item in tableList">
        <el-input v-if="item.type=='input'" v-model="scope.row.row[item.param]"> </el-input>
        <el-select v-model="scope.row.row[item.param]" :clearable="true" placeholder="请选择" :disabled="item.disabled"
                   v-bind="item.attrs" v-if="item.type == 'select'" style="width: 100%">
          <el-option v-for="(el, index) in dictList" :key="index" :label="el.label"
                     :value="el.value"
          >
          </el-option>
        </el-select>
      </template>
    </HKTable>
  </div>
</template>



<script>
import HKTable from "@/components/HKTable/index.vue";
export default {
  components: { HKTable },
  data() {
    return {
      key: "value",
    };
  },
  computed: {
    tableDatas() {
      return this.tableData;
    },
  },
  props: {
    tableData: {
      type: Array,
      default: () => [],
    },
    tableList: {
      type: Array,
      default: () => [],
    },
    dictList:{
      type:Array,
      default: () => [],
    }
  },
  methods: {
    AddClick() {
      this.tableDatas.push({ isNew: true });
    },
    handleDelete(data) {
      this.tableDatas.splice(data.index, 1);
    },
    submitTable() {
      return new Promise((resolve, reject) => {
        resolve(this.tableDatas);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
